<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
       <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
            <el-form-item prop="goodsName">
                <el-input v-model="searchForm.goodsName" clearable placeholder="商品名称"></el-input>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus" v-has="'integral:integral:add'">创建商品</el-button>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
          </div>
        </div> -->

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight"   stripe v-loading="loading">
            <el-table-column prop="supplierName" label="商家名称" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
            <el-table-column prop="goodsUrl" label="商品信息" v-if="!hideTableColumn.includes('activityTypeName')" align="left">
              <template #default="scope">
                <div class="goodsBox">
                  <div class="img">
                    <el-image :src="item" fit="fill" v-image-preview="item" class="img" v-for="item in scope.row.img" style="margin-right:10px"></el-image>
                  </div>
                  <div class="goodsRight">
                    <div class="goodsName ellipsis-item">{{scope.row.pointsGoodsName}}</div>
                    <div class="goodsLabel">
                      {{scope.row.usePoints}}积分
                    </div>
                  </div>
                </div>
              </template>
              <!-- <template #default="scope">
                 <el-image :src="item" fit="fill" v-image-preview="item" class="img" v-for="item in scope.row.img" style="margin-right:10px"></el-image>
              </template> -->
            </el-table-column>

            <el-table-column prop="userName" label="用户名称" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
            <el-table-column prop="telephone" label="用户手机号" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
            <el-table-column prop="createTime" label="兑换时间" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
            <el-table-column prop="address" label="收货地址" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
              v-show="total"
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>
    <!-- 新增 -->
    <el-dialog :title="dialogTitle" width="1400px" v-dialogDrag :visible.sync="addVisible" @close="addVisible = false" :close-on-click-modal="false">
      <el-form  :model="form" id="userDialog" status-icon :rules="rules" ref="form" label-position="right" >
        <el-form-item label="商家名称" prop="supplierName" label-width="125px" >
          <el-input type="text" v-model="form.supplierName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName" label-width="125px" >
          <el-input type="text" v-model="form.goodsName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="goodsUrl" label-width="125px" >
          <MyUpMoreImg :imagePreview='goodsUrl'  imageLimit="5" returnType="obj" imageSize="" @change="imageMultiChange($event)" ></MyUpMoreImg>
        </el-form-item>
        <el-form-item label="商品详情" prop="goodsDetails" label-width="125px" >
            <QuillEditor  :value.sync="form.goodsDetails" />
        </el-form-item>
        <el-form-item label="商品库存" prop="goodsNum" label-width="125px" >
          <el-input type="number" v-model="form.goodsNum" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品兑换积分" prop="needPoints" label-width="125px" >
          <el-input type="number" v-model="form.needPoints" autocomplete="off"><template slot="append">积分</template></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAddShopSubmit('form')" size="small" :loading="btnLoading">保 存</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getExchangeRecordList
  } from '@/api/getData'
  import option from '../../common/option.js';
  import QuillEditor from '@/components/QuillEditor/quillEditor'
  export default {
    components: { QuillEditor },
    data() {
      return {
        loading: false,
        btnLoading:false,
        searchForm: {
          goodsName:'',
          pageNum: 1,
          pageSize: 20,
        },
        dataList:[],
        total: 0,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dialogTitle:'',
        addVisible:false,
        goodsUrl:[],
        form:{
          pointsGoodsId:'',
          goodsName:'',
          goodsNum:'',
          goodsUrl:'',
          goodsDetails:'',
          needPoints:'',
          supplierName:''
        },
        rules: {
         goodsName: [{required: true, message: '请输入商品名称',trigger: 'blur'}],
         needPoints: [{required: true, message: '请输入商品兑换节分',trigger: 'blur'}],
         goodsNum: [{required: true, message: '请输入商品库存',trigger: 'blur'}],
         goodsUrl: [{required: true, message: '请上传商品图片',trigger: 'blur'}],
         supplierName: [{required: true, message: '请输入商家名称',trigger: 'blur'}],
        },
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.page.offsetHeight - 55;
          console.log(this.tableHeight,123123)
      })
    },
    methods: {
      imageMultiChange(path, name) {
        console.log(path, name)
        let img = [];
        for(let i=0;i<path.length;i++){
         img.push(path[i].fullFilename);
        }
        this.goodsUrl = img;
        this.form.goodsUrl = img;
      },
      handleAddShopSubmit(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            let data = JSON.parse(JSON.stringify(this.form))
            data.goodsUrl = data.goodsUrl.join(',');
            let result;
            if(data.pointsGoodsId){
              result = await pointsGoodsUpdate(data);
            }else{
              result = await pointsGoodsAdd(data);
            }
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.addVisible = false;
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;

          }
        })
      },
      /** 删除当前列 **/
      handleDelt(row){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            pointsGoodsDelete({pointsGoodsId:row.pointsGoodsId}).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch((err) => {
              console.log(err);
          });
      },
      getSelect(){
        this.getSelectList('houniao_activity_type').then((res)=>{
          this.typeList = res.data;
        })
      },
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getExchangeRecordList(this.searchForm);
          if (result.code == 200) {
            this.total = result.total;
            let data = result.rows;
            data.map(item=>{
              item.img = item.pointsGoodsUrl.split(',');
            })
            this.dataList = data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },

      handleAdd(){
        this.dialogTitle = '创建商品';
        this.form = {
           pointsGoodsId:'',
           goodsName:'',
           goodsNum:'',
           goodsUrl:'',
           needPoints:'',
           goodsDetails:'',
           supplierName:''
        };
        this.goodsUrl = [];
        this.addVisible = true;
      },
      handleEdit(row){
        this.dialogTitle = '修改商品';
        this.goodsUrl = row.goodsUrl.split(',');
        this.form = {
           pointsGoodsId:row.pointsGoodsId,
           goodsName:row.goodsName,
           goodsNum:row.goodsNum,
           goodsUrl:row.goodsUrl.split(','),
           needPoints:row.needPoints,
           goodsDetails:row.goodsDetails,
           supplierName:row.supplierName
        };
        this.addVisible = true;
      },


    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
